<template>
  <div :class="program + 'playlist'">
    <div
      class="playlist-item"
      v-for="(item, index) in musicList"
      :key="index"
      @mouseenter="handleOver(index)"
      @mouseleave="handleLeave(index)"
    >
      <div class="playlist-item-container">
        <div class="playlist-item-container-group">
          <transition name="palylist-slide">
            <div v-show="currentIndex == index" class="playlist-desc">
              {{ item.copywriter }}
            </div>
          </transition>
          <transition name="palylist-slide">
            <div v-show="currentIndex != index" class="playlist-count">
              <div>
                <i class="iconfont iconhuabankaobei-"></i>{{ item.playCount }}
              </div>
            </div>
          </transition>
          <transition name="dance-music-opacity">
            <div class="playlist-play" v-show="currentIndex == index">
              <i class="iconfont iconbofang1"></i>
            </div>
          </transition>
          <img v-lazy="item.picUrl" alt @click="enterMusicDetail(item)"/>
        </div>
        <div
          :class="['palylist-name', `${program + 'playlist-name-' + theme}`]"
        >
          <p @click="enterMusicDetail(item)">{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { theme } from "mixin/global/theme";

export default {
  name: "Musiclist",
  mixins: [theme],
  props: {
    musicList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currentIndex: null,
    };
  },
  methods: {
    handleOver(index) {
      this.currentIndex = index;
    },
    handleLeave() {
      this.currentIndex = null;
    },
    enterMusicDetail(musicDetail) {
      let params = {
        id: musicDetail.id,
        time: new Date().getTime()
      }
      this.$router.push({name: 'musicListDetail',params: params})
    }
  },
};
</script>
<style lang="less" scoped>
.dance-music-playlist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .playlist-item {
    width: calc(20%);
    padding: 5px 10px;
    img {
      cursor: pointer;
      width: 100%;
      border-radius: 4px;
    }
  }
}
.playlist-item-container {
  overflow: hidden;
  &-group {
    position: relative;
  }
}
.playlist-desc {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.playlist-count {
  width: 100%;
  text-align: right;
  position: absolute;
  top: 0;
  color: #fff;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  font-size: 13px;
}
.playlist-play {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 8px;
  bottom: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .iconbofang1 {
    font-size: 15px !important;
    color: var(--main-color);
  }
}
.palylist-name {
  cursor: pointer;
}
.dance-music-playlist-name-light:hover {
  color: rgb(0, 0, 0);
}
.dance-music-playlist-name-dark:hover {
    color: rgb(250, 250, 250)
}
.palylist-slide-enter-active {
  animation: slideInDown 0.6s;
}
.palylist-slide-leave-active {
  animation: slideOutUp 0.8s;
}
.dance-music-opacity-enter-active {
  animation: rollIn 0.8s;
}
.dance-music-opacity-leave-active {
  animation: rollOut 1.5s;
}
</style>